<!--
Copyright (c) 2021-2024 SigScalr, Inc.

This file is part of SigLens Observability Solution

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5SBJC04YFB"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-5SBJC04YFB');
    </script>

<head>
    <meta charset="UTF-8">
    <title>SigLens</title>

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="manifest" href="assets/site.webmanifest">
    <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">

    <link rel="stylesheet" href="./css/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/lib/all.min.css" />
    <link rel="stylesheet" href="./css/lib/ag-grid.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery.tagsinput.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    <link rel="stylesheet" href="./css/lib/tippy.css" />
    <link rel="stylesheet" href="./css/siglens.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/query-builder.css?cb={{ AppVersion }}" />

    <script src="./js/lib/uuidv4.min.js"></script>
    <script src="./js/lib/lodash.min.js"></script>
    <script src="./js/lib/jquery-3.6.0.min.js"></script>
    <script src="./js/lib/jquery-ui.min.js"></script>
    <script src="./js/lib/js.cookie.min.js"></script>
    <script src="./js/lib/moment.min.js"></script>
    <script src="./js/lib/date_fns.min.js"></script>
    <script src="./js/lib/popper.min.js"></script>
    <script src="./js/lib/tippy-bundle.umd.min.js"></script>
    <script src="./js/lib/bootstrap.bundle.min.js"></script>
    <script src="./js/lib/ag-grid-community.min.noStyle.js"></script>
    <script src="./js/lib/echarts.min.js"></script>

    <script>
        var defaultTheme = Cookies.get('theme') || 'light';
        $('html').attr('data-theme', defaultTheme);
    </script>
    {{ .RunCheck1 | safeHTML }}
</head>

<body>
    <div class="pop-layer" id="pop-layer">
    </div>
    <div id="app-container">

        <div id="app-side-nav">
        </div>

        <div id="dashboard" class="dashboard-box">

            <div id="custom-code-tab" class="custom-code-tab w-100">
                <div class="query-builder-container">
                    <div class="dropdown-box">
                        <div class="d-flex logcontainer">
                            <ul class="tab-list">
                                <li class="tab-li tab-li-query" id = "tab-title1"><a href="#tabs-1" class="custom-query-builder">Builder</a></li>
                                <li class="tab-li tab-li-code" id = "tab-title2"><a href="#tabs-2"  class="custom-query-builder">Code</a></li>
                            </ul>
                            <button class="format-icon" id="formatInput">Format</button>
                        </div>
                        <div class="dropdown-container">
                            <div class="d-flex">
                                <div style="margin-right: 5px;margin-top: 3px;">Indexes:</div>
                                <div class="index-container">
                                    <input type="text" name="" id="index-listing">
                                    <button id="add-index" class="add-con btn">+</button>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn dropdown-toggle" type="button" id="date-picker-btn" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false" data-bs-toggle="dropdown">
                                    <span>Time Picker</span>
                                    <i class="dropdown-arrow"></i>
                                </button>
                                <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn" id="daterangepicker ">
                                    <p class="dt-header">Search the last</p>
                                    <div class="ranges">
                                        <div class="inner-range">
                                            <div id="now-5m" class="range-item ">5 Mins</div>
                                            <div id="now-3h" class="range-item">3 Hrs</div>
                                            <div id="now-2d" class="range-item">2 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-15m" class="range-item">15 Mins</div>
                                            <div id="now-6h" class="range-item">6 Hrs</div>
                                            <div id="now-7d" class="range-item">7 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-30m" class="range-item">30 Mins</div>
                                            <div id="now-12h" class="range-item">12 Hrs</div>
                                            <div id="now-30d" class="range-item">30 Days</div>
                                        </div>
                                        <div class="inner-range">
                                            <div id="now-1h" class="range-item">1 Hr</div>
                                            <div id="now-24h" class="range-item">24 Hrs</div>
                                            <div id="now-90d" class="range-item">90 Days</div>
                                        </div>
                                        <hr>
                                        </hr>
                                        <div class="dt-header">Custom Search <span id="reset-timepicker" type="reset">Reset</span>
                                        </div>
                                        <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
                                            <input type="date" id="date-start" />
                                            <input type="time" id="time-start" value="00:00" />
                                        </div>
                                        <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
                                            <input type="date" id="date-end">
                                            <input type="time" id="time-end" value="00:00">
                                        </div>
                                        <div class="drp-buttons">
                                            <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn" type="button">Apply</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn settings-btn" id="logs-settings">
                            </button>
                            <div class="" id="setting-container">
                                <div class="mb-1">Query Language:</div>
                                <div class="dropdown w-100">
                                    <button class="btn btn-grey dropdown-toggle" type="button" id="query-language-btn" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" >
                                        <span>Splunk QL</span>
                                        <i class="dropdown-arrow"></i>
                                    </button>
                                    <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="query-language-options">
                                        {{ .Dropdown2 | safeHTML }}
                                        <li id="option-3" class="query-language-option active">Splunk QL</li>
                                    </div>
                                </div>
                                <div class="mt-3 mb-1">Query Mode:</div>
                                <div class="dropdown w-100">
                                    <button class="btn btn-grey dropdown-toggle w-100" type="button" id="query-mode-btn" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
                                        <span>Builder</span>
                                        <i class="dropdown-arrow"></i>
                                    </button>
                                    <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="query-mode-options">
                                        <li id="mode-option-1" class="query-mode-option">Builder</li>
                                        <li id="mode-option-2" class="query-mode-option">Code</li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex">
                        <div id = "tabs-1">
                            <div class="filter-info">
                                <div id="filter-container">
                                    <div class="filter-con">
                                        <div class="filter-box" id="filter-box-1">
                                            <span class = "aggregations" id="search-filter-text">Search filter</span>
                                            <ul id="tags" class="tags-list"></ul>
                                            <button id="add-con" class="add-con btn">+</button>
                                        </div>
                                        <div class="add-filter" id="add-filter">
                                            <input id="column-first" class="column-first" type="hidden" onkeyup="checkContent(this)"/>
                                            <input id="symbol" class="symbol" type="hidden" onkeyup="checkContent(this)"/>
                                            <input id="value-first" class="value-first" type="hidden" onkeyup="checkContent(this)"/>
                                            <button id="completed" class="completed btn"></button>
                                            <button id="cancel-enter" class="cancel-enter btn">×</button>
                                        </div>
                                    </div>
                                    <div class="builder-div">stats</div>
                                    <div class="filter-con second-enter">
                                        <div class="filter-box" id="filter-box-2">
                                            <span class = "aggregations" id="aggregate-attribute-text">Aggregation attribute</span>
                                            <ul id="tags-second" class="tags-list"></ul>
                                            <button id="add-con-second" class="add-con btn">+</button>
                                        </div>
                                        <div class="add-filter add-filters" id="add-filter-second">
                                            <input id="column-second" class="column-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                            <input id="value-second" class="value-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                            <button id="completed-second" class="completed btn" ></button>
                                            <button id="cancel-enter-second" class="cancel-enter btn">×</button>
                                        </div>
                                    </div>
                                    <div class="builder-div">group by</div>
                                    <div class="filter-con third-enter">
                                        <div class="filter-box third-box"  id="filter-box-3">
                                            <span class = "aggregations" id="aggregations">Group by column name</span>
                                            <ul id="tags-third" class="tags-list"></ul>
                                            <button id="add-con-third" class="add-con btn">+</button>
                                        </div>
                                        <div class="add-filter add-third" id="add-filter-third">
                                            <input id="column-third" class="column-third" type="hidden" />
                                            <button id="cancel-enter-third" class="cancel-enter btn">×</button>
                                        </div>
                                    </div>
                                </div>
                                <button class="search-img" id="query-builder-btn"></button>
                            </div>
                        </div>
                        <div id = "tabs-2">
                            <div class="filter-container">
                                <div class="position-relative search-bar-container">
                                    <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-sql" style="display: none;"
                                        title=' SELECT MAX(latency), COUNT(city) FROM `*` GROUP BY country, gender LIMIT 10
                                                                            SELECT * FROM `ind-0`
                                                                            SELECT * FROM `ind-0` ORDER BY latency ASC
                                                                            SELECT first_name AS firstnames, country AS origincountry FROM `ind-0`
                                                                            SELECT MAX(latency), COUNT(city) FROM `*` WHERE gender = male GROUP BY country LIMIT 10
                                                                            SELECT * FROM `*` WHERE app_name = Wheataccount AND gender = male LIMIT 10'>

                                    </i>
                                    <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-logQL" style="display: none;"
                                        title=' {app="mysql",name="mysql-backup"}
                                                                            {job="mysql"} |= "error"
                                                                            {name="cassandra"} |~ error=\w+
                                                                            {job="mysql"} |= "error" != "timeout"
                                                                            {job="mysql"} |= "error" | json | line_format "&lbrace;{.err}&rbrace;"
                                                                            '>
                                    </i>
                                    <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip" id="info-icon-spl" style="display: block;"
                                        title=' app_version!=2.14.2 AND weekday=T*day
                                                                            city=Boston | stats count, avg(latency) BY weekday, http_method
                                                                            city=Boston | stats avg(latency) AS Avg BY weekday | eval Millis=Avg / 1000, Millis=Millis . " ms"
                                                                            city=Boston | ```This is a comment``` fields http*
                                                                            http_method=POST | regex city="^[a-zA-Z]+\s[a-zA-Z]+$" | fields city
                                                                            city=Boston | stats count AS Count BY weekday | where Count / 2 > 6 OR weekday = "Saturday"
                                                                            '>
                                    </i>
                                    <textarea class="form-control expandable-textarea" id="filter-input"
                                        placeholder="Enter your SPL query here, or click the 'i' icon for examples" type="text"></textarea>
                                    <span class="clear-icon" id="clearInput"></span>
                                </div>
                                <div class="text-end">
                                    <button class="btn run-filter-btn" id="run-filter-btn"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="record-searched"></div>
            <div id="progress-div"></div>


            <div class="custom-chart-container">
                <div class="fields-sidebar" style="display: none;">
                    <div id="selected-fields-header" class="fields-header">
                      <div>
                            <i class="fa fa-chevron-down"></i>
                            <span>Selected Fields</span>
                      </div>
                      <span class="field-count">0</span>
                    </div>
                    <div id="selected-fields-list" class="fields-list"></div>

                    <div id="available-fields-header" class="fields-header">
                        <div>
                            <i class="fa fa-chevron-down"></i>
                            <span>Available Fields</span>
                        </div>
                      <span class="field-count">0</span>
                    </div>
                    <div id="available-fields-list" class="fields-list"></div>
                </div>
                <div id="custom-chart-tab" class="custom-code-tab custom-chart-tab">
                    <div class="d-flex align-items-center">
                        <ul class="tab-chart-list">
                            <li class="tab-li" id="tab-table-title"><a href="#showTable" class="custom-query-builder">Table</a>
                            </li>
                            <li class="tab-li" id="tab-chart-title"><a href="#tabs-chart" class="custom-query-builder">Visualization</a>
                            </li>
                        </ul>
                        <div id="logs-view-controls">
                            <div id="save-query-div">
                                <button class="btn saveq-btn below-btn-img" id="saveq-btn"></button>
                                <button class="btn add-logs-to-db-btn below-btn-img" id="add-logs-to-db-btn" class="mx-3" ></button>
                                <button class="btn alert-from-logs-btn below-btn-img" id="alert-from-logs-btn"></button>
                                <div class="dropdown download-btn">
                                    <button class="btn dropdown-toggle download-all-logs-btn below-btn-img" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown">
                                    </button>
                                    <div class="dropdown-menu box-shadow download-options" aria-labelledby="index-btn" id="save-query-options">
                                        <li id="csv-block" class="query-language-option">Download as CSV</li>
                                        <li id="json-block" class="query-language-option">Download as JSON</li>
                                        <li id="xml-block" class="query-language-option">Download as XML</li>
                                        <li id="sql-block" class="query-language-option">Download as SQL</li>
                                    </div>
                                </div>
                                <button class="btn show-record-intro-btn below-btn-img" id="show-record-intro-btn"></button>
                            </div>
                        </div>
                        <div id="views-container">
                            <div class="btn-group" role="group" id="log-view">
                                <button class="btn log-opt-single-btn" id="log-opt-single-btn">
                                    <span class="single-line-icon" ></span>
                                </button>
                                <button class="btn log-opt-multi-btn" id="log-opt-multi-btn">
                                    <span class="multi-line-icon"></span>
                                </button>
                                <button class="btn log-opt-table-btn" id="log-opt-table-btn">
                                    <span class="table-view-icon" ></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="tabs-chart" class="tab-content-size">
                        <div id="columnChart" class="column-chart"></div>
                        <div id="hideGraph" class="hide-graph">
                            <div class="hide-graph-text">This query does not contain visualization data</div>
                        </div>
                    </div>
                    <div id="showTable" class="show-table">
                        <div id="logs-result-container" class="tab-content-size">
                            <div id="LogResultsGrid" class="LogResultsGrid ag-theme-mycustomtheme"></div>
                        </div>
                        <div id="agg-result-container" class="tab-content-size">
                            <div id="measureAggGrid" class="measureAggGrid ag-theme-mycustomtheme"></div>
                        </div>
                        <div id="pagination-container"></div>
                    </div>
                </div>
                <div class="json-popup"></div>
            </div>
            <div id="empty-response"></div>
            <div id="initial-response">Create a query using the builder to access and view the logs.</div>



            <div id="corner-popup">
                <div class="corner-container">
                    <div class="corner-text" id="corner-text"></div>
                </div>
                <button class="btn corner-btn-close" id="close-btn">OK</button>
            </div>

        </div>

        <div id="save-queries">
            <p class="validateTips"></p>
            <form>
                <fieldset>
                    <input type="text" name="qname" id="qname" placeholder="Name"
                        class="text ui-widget-content ui-corner-all">
                    <input type="text" name="description" id="description" placeholder="Description (Optional)"
                        class="text ui-widget-content ui-corner-all">
                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset>
            </form>
        </div>
        <div class="show-record-popup" id="show-record-popup">
            <form>
                <fieldset>
                    <div id="hits-summary" class="hits-summary"></div>
                </fieldset>
            </form>
        </div>
        <div id="download-info"  class="save-query">
            <p class="validateTips" id="validateTips"></p>
            <form>
                <fieldset>
                    <input type="text" name="qnameDL" id="qnameDL" placeholder="Name"
                        class="text ui-widget-content ui-corner-all">
                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset>
            </form>
        </div>
        <div class="pop-download" id="pop-box">
            <div class="pop-text">Downloading Logs</div>
            <button class="btn btn-secondary" id="cancel-loading">Cancel</button>
        </div>
        <div id="progressbar" class="progress-download"></div>
        <!-- Dashboard Popup-->
        <div class="popupOverlay"></div>
        <div class="popupContent" id="create-db-popup">
            <h3 class="header mb-2">Add panel to dashboard</h3>
            <p>Choose where to add the panel</p>
            <div class="section-buttons mt-2">
                <div class="section-button active new-dashboard-btn"><a>New Dashboard</a></div>
                <div class="section-button existing-dashboard-btn"><a>Existing Dashboard</a></div>
            </div>
            <div class="new-dashboard">
                <div>
                    <input type="text" placeholder="Name" class="input mt-3" id="db-name">
                    <p class="error-tip">Dashboard name is required!</p>
                    <input type="text" placeholder="Description (Optional)" class="input mt-3" id="db-description">
                </div>
            </div>
            <div class="existing-dashboard">
                <p for="" class="mt-3 mb-3"><small>Select in which dashboard the panel will be created.</small></p>
                <div class="dropdown w-100">
                    <button class="btn dropdown-toggle btn-grey w-100" type="button" id="selected-dashboard" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" >
                        <span>Choose Dashboard</span>
                        <i class="dropdown-arrow"></i>
                    </button>
                    <div class="dropdown-menu box-shadow" aria-labelledby="index-btn" id="dashboard-options">
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-center mt-4">
                <button type="button" id="cancel-dbbtn" class="my-0 btn btn-secondary">Cancel</button>
                <button type="button" id="create-db" class="btn create-db">Create Dashboard</button>
                <button type="button" id="create-panel" class="btn create-db">Create Panel</button>
            </div>
        </div>
        <div class="addrulepopupOverlay"></div>
            <div class="addrulepopupContent popupContent">
                <h3 class="header">Create Alert</h3>
                <div class="popupcont mt-3">
                <label>Enter alert rule name</label>
                <input type="text" id="rule-name" name="rule-name" required placeholder="Name">
                <p class="rule-name-error"></p>
                </div>
                <div class="btncontainer mt-3">
                    <button type="button" id="addrule-cancel-btn" class="btn btn-secondary">Cancel</button>
                    <button type="button" id="addrule-save-btn" class="btn btn-primary">Add
                        <img src="assets/new-tab-white-icon.svg">
                    </button>
                </div>
            </div>

        <div class="popupContent" id="error-popup">
            <h3 class="header mb-2"><span><i class="fas fa-exclamation-triangle"></i></span> Error loading data</h3>
            <p class="mt-3">The search settings were changed. To see the updated results, please press the <span style="color: #6449D6; font-weight: 600;">magnifying glass</span> icon.<p>
            <div class="d-flex align-items-center justify-content-end mt-3">
                <button type="button" id="okay-button" class="btn">OK</button>
            </div>
        </div>

        <div id="app-footer">
        </div>

    </div>

    <script src="./js/navbar.js?cb={{ AppVersion }}"></script>
    <script src="./js/common.js?cb={{ AppVersion }}"></script>
    <script src="./js/event-handlers.js?cb={{ AppVersion }}"></script>
    <script src="./js/available-fields.js?cb={{ AppVersion }}"></script>
    <script src="./js/log-results-grid.js?cb={{ AppVersion }}"></script>
    <script src="./js/ag-grid-seg-stats.js?cb={{ AppVersion }}"></script>
    <script src="./js/date-picker.js?cb={{ AppVersion }}"></script>
    <script src="./js/search.js?cb={{ AppVersion }}"></script>
    <script src="./js/saved-query.js?cb={{ AppVersion }}"></script>
    <script src="./js/download-logs.js?cb={{ AppVersion }}"></script>
    <script src="./js/index.js?cb={{ AppVersion }}"></script>
    <script src="./js/log-search.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard-from-logs-metrics.js?cb={{ AppVersion }}"></script>
    <script src="./js/query-builder.js?cb={{ AppVersion }}"></script>
    <script src="./js/pagination.js?cb={{ AppVersion }}"></script>
    <script src="./js/footer.js?cb={{ AppVersion }}"></script>

    {{ .RunCheck2 | safeHTML }}
    {{ .RunCheck3 | safeHTML }}

</body>

</html>
